<template>
	<MainContent>
		<template v-slot:title>
				<span class="title">
					<i class="el-icon-reading"></i>
					<span>&nbsp;数据字典</span>
				</span>
		</template>
		<template>
			<div class="shoulder">
				<el-button size="mini" icon="el-icon-search" @click="showSearch = !showSearch">{{ toggleSearchText }}
				</el-button>
				<el-button size="mini" icon="el-icon-plus" @click="addDictCategory">新增</el-button>
				<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteDictCategories(multiSelectionCodeMap)">
					删除
				</el-button>
				<el-button size="mini" icon="el-icon-refresh" @click="getDictCategories"></el-button>
				<el-button size="mini" icon="el-icon-menu"
									 @click="checkboxGroupDialogVisible = !checkboxGroupDialogVisible"></el-button>
			</div>
			<div style="clear: both;"></div>
			<div class="content">
				<transition name="linear">
					<div class="search-wrapper" v-show="showSearch">
						<el-form ref="search" inline :model="searchText" size="small" label-suffix=":">
							<el-form-item label="关键字" prop="selective">
								<el-input v-model="searchText.selective" placeholder="参数名称"></el-input>
							</el-form-item>
							<el-form-item label="系统内置" prop="inner">
								<el-select v-model="searchText.inner">
									<el-option label="是" value="1"></el-option>
									<el-option label="否" value="0"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="mini" @click="handleSubmit">查询</el-button>
								<el-button size="mini" @click="resetForm('search')">重置</el-button>
							</el-form-item>
						</el-form>
					</div>
				</transition>
				<div>
					<el-table v-loading="loading" size="mini" ref="table" style="" :data="pageInfo.list"
										@selection-change="handleSelectionChange" border stripe
										element-loading-text="加载中" element-loading-spinner="el-icon-loading">
						<el-table-column type="selection" width="55" align="center"/>
						<el-table-column sortable v-for="column in tableColumns" :key="column.field" :label="column.comment"
														 :prop="column.field">
							<template slot-scope="scope">
								<router-link v-if="column.field === 'code'" :to="'/dict/detail?code=' + scope.row.code">{{ scope.row.code }}</router-link>
								<span v-else>{{ scope.row[column.field] }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="smallest">编辑</el-button>
								<el-button size="smallest" type="danger" @click="deleteDictCategories(scope.row.code)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-pagination ref="pagination" background layout="total, sizes, ->,  prev, pager, next" :total="pageInfo.total"
											 @size-change="handlePageSizeChange" @current-change="handlePageNumChange"
											 @prev-click="handlePageNumChange"
											 @next-click="handlePageNumChange">
				</el-pagination>
			</div>

			<CheckboxGroupDialog
				:visible.sync="checkboxGroupDialogVisible"
				:width="'500px'"
				:items="columns"
				:checkedItems="selectedFields"
				labelProp="field"
				valueProp="comment"
				@change="updateColumns">
			</CheckboxGroupDialog>
		</template>
	</MainContent>
</template>

<script>
import MainContent from "@/components/common/MainContent";
import {mapState, mapGetters, mapMutations} from "vuex"
import CheckboxGroupDialog from "@/components/common/CheckboxGroupDialog";

import {ObjectUtils} from "@/assets/scripts/utils";

export default {
	name: "DictCategory",
	components: {
		CheckboxGroupDialog,
		MainContent,
	},
	data() {
		return {
			showSearch: false,
			checkboxGroupDialogVisible: false,
			dictCategoryFormVisible: false,
			searchText: {
				selective: "",
				inner: ""
			},
			pageParams: {
				pageNum: 1,
				pageSize: 10,
				orderBy: "",
				order: "asc"
			},
			pageInfo: {},
			loading: true,
			multiSelection: []	// 选择的列
		}
	},
	methods: {
		// 显示自定义列对话框
		// handleCheckboxGroupDialog() {
		// 	this.checkboxGroupDialogVisible = true;
		// },
		getDictCategories() {
			this.loading = true;
			this.axios.request({
				url: "/sys/dict/getDictCategories",
				method: "post",
				params: {...this.searchText, ...this.pageParams}
			}).then(response => {
				if (response.status === 200) {
					this.pageInfo = response.data;
				}
				this.$refs["table"].doLayout()
				this.loading = false;
			})
		},
		/**
		 *
		 * @param codes  String/Array
		 */
		deleteDictCategories(codes) {
			if (ObjectUtils.isEmpty(codes)) {
				this.$message.error("请至少选择一行删除!")
			} else {
				this.$confirm("此操作不可恢复,是否继续?").then(() => {
					this.axios({
						method: "post",
						url: "/sys/dict/deleteDictCategories",
						params: {codes: codes.toString()}
					}).then(response => {
						if (response.status === 200) {
							this.getDictCategories();
						}
					})
				}).catch(() => this.$message("取消删除"))
			}
		},
		handleSubmit() {
			this.getDictCategories()
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		handlePageSizeChange(value) {
			this.pageParams.pageSize = value;
			// 每页条数改变，只发送一次请求
			if (this.pageParams.pageNum === 1) {
				this.getDictCategories();
			}
		},
		handlePageNumChange(value) {
			this.pageParams.pageNum = value
			this.getDictCategories()
		},
		...mapMutations("dictCategoryColumns", {
			"updateColumns": "updateColumns"
		}),
		addDictCategory() {
			this.$router.push("/dict/category/form")
		},
		handleSelectionChange(val) {
			this.multiSelection = val
		}
	},
	computed: {
		toggleSearchText() {
			return this.showSearch ? "隐藏" : "查询";
		},
		multiSelectionCodeMap() {
			return this.multiSelection.map(value => value.code)
		},
		...mapState("dictCategoryColumns", ["columns"]),
		...mapGetters("dictCategoryColumns", {
			"tableColumns": "selectedColumns",
			"selectedFields": "selectedFields"
		})
	},
	created: function () {
		this.getDictCategories();
	},
	watch: {}
}
</script>

<style lang="scss" scoped>

</style>
